<!--预约餐桌状态设置管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">我的预约状态</span>
  </div>
  <!-- 申请单搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="分店选择" style="width:250px;">
        <el-select v-model="search.branchId" @change="loadTableDate">
          <el-option v-for="item in branchOptions"
                     :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadTableDate">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 预约单信息列表 -->
  <el-card  style="margin:20px;">
    <el-radio-group style="margin-bottom: 15px;" v-model="type">
      <el-radio-button value="60" size="large" @change="loadTableDate">未到店</el-radio-button>
      <el-radio-button value="70" size="large" @change="loadTableDate">已到店</el-radio-button>
    </el-radio-group>
    <el-table :data="tableData">
      <el-table-column label="编号" type="index" width="100" align="center"></el-table-column>
      <el-table-column align="center" prop="username" label="申请人"></el-table-column>
      <el-table-column align="center" prop="reserveName" label="预留姓名"></el-table-column>
      <el-table-column align="center" prop="phone" label="预留电话"></el-table-column>
      <el-table-column align="center" prop="reservationTime" label="预约时间"></el-table-column>
      <el-table-column align="center" prop="number" label="就餐人数"></el-table-column>
      <el-table-column align="center" prop="branchId" label="预约餐厅" :formatter="formatRoleTable"></el-table-column>
      <el-table-column align="center" prop="tableId" label="预约餐桌" :formatter="formatTableTable"></el-table-column>
      <el-table-column align="center" prop="status" label="申请单状态" :formatter="appStatusFormatter"></el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template #default="scope">
          <el-button type="primary" link v-if="type==60" @click="affirmCome(scope.row)">确认到店</el-button>
          <el-button type="primary" link v-if="type==70" @click="lookDetails(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 预约单详情/查看弹窗 -->
  <el-dialog title="预约单详情" v-model="reservationDialogVisible">
    <el-descriptions direction="horizontal" :column="2" border>
      <el-descriptions-item label="预留姓名">{{ auditDialogData.reserveName }}</el-descriptions-item>
      <el-descriptions-item label="预留电话">{{ auditDialogData.phone }}</el-descriptions-item>
      <el-descriptions-item label="预约时间">{{ auditDialogData.reservationTime }}</el-descriptions-item>
      <el-descriptions-item label="就餐人数">{{ auditDialogData.number+" 人" }}</el-descriptions-item>
      <el-descriptions-item label="预约餐厅">
        <el-input  :disabled="true" v-model="auditDialogData.branchId" :formatter="formatBranchId" style="border: none; background: transparent; padding: 0;"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="预约餐桌">
        <el-input  :disabled="true" v-model="auditDialogData.tableId" :formatter="formatTableId" style="border: none; background: transparent; padding: 0;"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="预约人">{{ auditDialogData.username }}</el-descriptions-item>
      <el-descriptions-item label="备注">{{ auditDialogData.remark }}</el-descriptions-item>
      <!--  驳回原因要在点击驳回才显示 -->
      <el-descriptions-item label="审核人"
                            >{{auditDialogData.handleName}}</el-descriptions-item>
    </el-descriptions>

  </el-dialog>


</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";
import {useRoute} from "vue-router";
//用于控制预约单详情弹窗是否可见
const reservationDialogVisible = ref(false);
// 定义保存登录用户信息
const user=ref(getUser());

//定义变量控制展示数据的类型,与单选组做绑定 50:待分配 60:已分配
const type = ref("60");
// 获取用户当前所在的餐厅id 设计基础值
const route = useRoute();
const branchId = Number(route.query.id);
//search.value.branchId = route.query.id;
//定义对象保存查询条件
const search = ref({
  userId:user.value.id,//当前登录用户的id
  branchId: branchId//分店
});
//定义数组用来保存申请单表格数据
const tableData = ref([]);
//定义加载申请单数据的方法
const loadTableDate = () => {
  // 设置状态
  search.value.status = type.value;
  // 发送ajax请求
  let data = qs.stringify(search.value);
  axios.get(BASE_URL + '/v1/reservation/select?'+data).then((response) => {
    if (response.data.code == 2000) {
      tableData.value = response.data.data;
      //console.log(tableData.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
// 定义弹窗的数据对象
const auditDialogData = ref({});
// 加载申请单详情的方法
const lookDetails = (row) => {
  // 显示弹窗
  reservationDialogVisible.value = true;
  auditDialogData.value=row;
}

// 定义保存餐厅数据的数组
const branchOptions = ref([]);
// 通过id显示餐厅的对应显示名称
const formatRoleTable = (row,column,cellValue,index)=>{
  if(!branchOptions.value){
    return cellValue;
  }
  for(let item of branchOptions.value){
    if(item.id==cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
};
// 定义保存餐桌数据的数组
const tableOptions = ref([]);
// 通过id显示餐桌的对应显示名称
const formatTableTable = (row,column,cellValue,index) => {
  if(!tableOptions.value){
    return cellValue;
  }
  for(let item of tableOptions.value){
    if(item.id==cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
}

// 定义格式化预约状态
const appStatusFormatter = (row, column, cellValue, index) => {
  if(cellValue == 10){
    cellValue = '已发起';
  }else if(cellValue == 20){
    cellValue = '已撤销';
  }else if(cellValue == 30){
    cellValue = '确认中';
  }else if(cellValue == 40){
    cellValue = '驳回';
  }else if(cellValue == 50){
    cellValue = '已审核';
  }else if(cellValue == 60){
    cellValue = '商家确认到店';
  }else if(cellValue == 70){
    cellValue = '顾客确认预约完成';
  }
  return cellValue;
}

onMounted(()=>{
  loadTableDate();
  // 获取当前分店
  getBranchs(branchOptions);
  getTables(tableOptions);
})
//定义重置搜索的方法
const resetSearch = ()=>{
  loadTableDate();
}
// 确认到店 修改预约表的预约单状态为完成：后端完成（修改对应餐桌对应时间的预约状态为 未预约 后端完成，  修改就餐状态为用餐中）
const affirmCome = (row)=>{
    // 定义商家确认到店状态
  let data = qs.stringify({status:70,
                                id:row.id,
                                reservationTime:row.reservationTime,
                                tableId:row.tableId
                               });
  // 发送ajax请求
  axios.post(BASE_URL + '/v1/reservation/save', data).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success('确认成功');
      // 重新加载预约单列表
      loadTableDate();
    } else {
      ElMessage.error(response.data.msg);
    }
  })

}

// 在弹窗中显示分店名称
const formatBranchId=(value)=>{
  if (!branchOptions.value){
    return value;
  }
  for (let item of branchOptions.value){
    if (item.id==value){
      value = item.name;
    }
  }
  return value;
}
// 在弹窗中显示餐桌名称
const formatTableId=(value)=>{
  if (!tableOptions.value){
    return value;
  }
  for (let item of tableOptions.value){
    if (item.id==value){
      value = item.name;
    }
  }
  return value;
}


</script>

<style scoped>

</style>